<template>
  <div>
    <van-nav-bar :title="$route.name" left-arrow />
    <van-list v-if="cartlist.length>0">
      <van-swipe-cell v-for="item in cartlist"  :key="item.id">
        <van-card
          :num="item.num"
          :price="item.price"
          desc="描述信息"
          :title="item.goodsname"
          class="goods-card"
          :thumb="item.img?$img+item.img:'https://img01.yzcdn.cn/vant/cat.jpeg'"
        >
          <template #footer>
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
            />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除"  @click="del(item.id)" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    
    
     
    </van-list>


    <van-list v-else>
        <van-empty description="购物车为空" />
    </van-list>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { getCartList,delCart } from "../util/axios";
import { mapGetters,mapActions } from "vuex";
export default {
  data() {
    return {
      value: 1,
      cartlist:[]
    };
  },
  components: {},
  methods: {
...mapActions(['getcartlist']),
    del(id){
              
        //  console.log();
        delCart({id})
        .then(res=>{
          // this.$router.go(0)
          console.log(res);
          // this.cartlist=res.list? res.list : [];
          getCartList({
      uid: this.getUserInfo.uid,
    }).then((res) => {
      console.log(res);
        if(res.code==200){
           this.cartlist=res.list? res.list : [];
           console.log(res);
        }
     
    });
        })
       
    }
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
  },

   beforeRouteLeave(to, from, next) {
    if (sessionStorage.getItem('userInfo')) {
      next();
     
    } 
  },
  mounted() {
    getCartList({
      uid: this.getUserInfo.uid,
    }).then((res) => {
      console.log(res);
        if(res.code==200){
           this.cartlist=res.list? res.list : [];
           console.log(res);
        }
     
    });
  },

  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("userInfo")) {
      next();
    }
    
    else {
      Dialog.confirm({
        title: "未登录",
        message: "购物车必须登录才能查看",
      })
        .then(() => {
          // on confirm
          next("/login");
        })
        .catch(() => {
          // on cancel()
          
          console.log("取消登录");
        });
    }
    //  console.log('被拦截了');
  },
};
</script>

<style lang="" scoped>
.van-button{
  height: 100%;
}
.van-swipe-cell{
  margin-bottom: 10px;
}
</style>
